<template>
  <div class="container">
    <div class="container-top">
      <div class="title">
        <h3>叩丁狼电商运营平台</h3>
        <div class="icon" @click="isCollapse = !isCollapse">
          <el-icon>
            <IconMenu />
          </el-icon>
        </div>

      </div>
      <div class="admin">
        <el-dropdown>
          <span class="el-dropdown-link">
            admin
            <el-icon>
              <ArrowDown />
            </el-icon>
          </span>

          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>首页</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </div>

    </div>
    <div class="container-bottom">
      <div class="menus-container">
        <el-menu default-active="0" class="el-menu-vertical-demo" text-color="#fff" active-color="#409eff"
          background-color="rgb(48, 65, 86)" :collapse="isCollapse" :unique-opened="true">
          <el-menu-item index="0" @click="router.push('index')">
            <i class="iconfont homepage"></i>

            <template #title>
              <span>首页</span>
            </template>
          </el-menu-item>

          <el-sub-menu :index="item.id.toString()" v-for="(item,index) in newMenuList" :key="item.id">
            <template #title>
              <i :class="['iconfont',item.icon]"></i>
              <span>{{item.title}}</span>
            </template>

            <el-menu-item :index="it.id.toString()" v-for="it in item.list" :key="item.id">
              <template #title>
                <i :class="['iconfont',it.icon]"></i>
                <span>{{it.title}}</span>
              </template>

            </el-menu-item>
          </el-sub-menu>

        </el-menu>
      </div>
      <div class="content-container">
        <!-- <nav>
          <RouterLink to="index">Home</RouterLink>
          <RouterLink to="/pinia">About</RouterLink>
        </nav> -->
        <RouterView />
      </div>
    </div>
  </div>
</template>



<script setup lang="ts">
import * as api from "@/request/api";
import { useMenusStore } from "@/stores/userInfonfo"; //需要修改
import { Menu as IconMenu, ArrowDown, Goods } from "@element-plus/icons-vue";
import { reactive, ref, type Ref } from "vue";
import { RouterLink, RouterView, useRouter } from 'vue-router'


//  Menu as IconMenu 组件别名
type IMenulist = IMenuItem & { list: IMenuItem[] };
const menusState = useMenusStore();

const router = useRouter();

let isCollapse = ref(false);
// let fast = ref(1000);


// 菜单列表
let newMenuList: Ref<IMenulist[]> = ref([]);//先初始化再获取数据。


function getStoreData() {
  // 获取仓库数据，设置响应式数据
  const menuList = menusState.menus;
  // 筛选出第一层数据，层级level都为0
  const newList = menuList.filter(item => item.level === 0);
  // 筛选第二层，以level =0 的数组为底，用map方法给每一项添加list的子数组，子数组的每一项parentId都等于父id属性。
  let newList2 = newList.map(item => {
    return {
      ...item,
      list: menuList.filter(it => it.parentId === item.id && it.hidden === 0)
    }
  });
  // 排序
  newList2.sort((a, b) => { return a.id - b.id });
  console.log(newMenuList);

  newMenuList.value = newList2;

  console.log(newMenuList);
}

getStoreData();








</script>


<style scoped lang="scss">
RouterView {
  background-color: #409eff;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex; //top + bottom 保证高度100vh
  flex-direction: column;
  overflow: hidden; //隐藏外侧滚动条
}

.container-top {
  height: 70px;
  background-color: #409eff;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;

  .title {
    display: flex;
    line-height: 70px;
    color: #fff;

    h3 {
      font-size: 24px;
    }

    .icon {
      display: flex;
      font-size: 20px;
      align-items: center;
      padding: 0 20px;
    }
  }

  .admin {
    display: flex;
    align-items: center;
    line-height: 70px;

    .el-dropdown {
      color: #fff;
    }
  }

}

.container-bottom {
  flex: 1;
  display: flex;
  overflow: hidden; //隐藏中间盒子滚动条

  .menus-container {
    background-color: rgb(48, 65, 86);
    // width: 250px;
    color: #fff;
    height: 100%; //限制高度
    overflow-y: auto; //显示里侧滚动条
    text-align: center;



    &::-webkit-scrollbar {
      width: 0; //滚动条宽度为0
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 250px;
    }



    // 侧边菜单样式
    :deep .el-menu {
      border: none;

      .el-sub-menu__title:hover {
        background-color: rgb(38, 52, 69) !important; //原来是行内样式
      }

    }
  }

  .content-container {
    background-color: #cfc;
    flex: 1;
    text-align: center;
    height: 100%;
    overflow: auto;

  }
}

.el-aside {
  transition: width 0.15s !important;
}
</style>
